<template>
  <div class="search">
    <el-form :inline="true" :model="queryForm" ref="queryForm">
      <el-form-item prop="state">
        <el-select clearable placeholder="请选择" v-model="queryForm.belong">
          <el-option label="小强" :value="1"></el-option>
          <el-option label="小Y" :value="2"></el-option>
          <el-option label="小X" :value="3"></el-option>
          <el-option label="一宝" :value="4"></el-option>
          <el-option label="小Q" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input v-model="queryForm.name" placeholder="店铺名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDdeptQuery"
          >查找</el-button
        >
        <el-button type="success" icon="el-icon-edit" @click="handleAdd"
          >添加</el-button
        >
        <el-button @click="resetForm('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="tables" style="padding: 10px">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-for="item in tableCloum"
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter"
        :width="item.width"
        :align="item.align"
      >
      </el-table-column>
      <el-table-column label="操作" width="250px" align="center">
        <template #default="scope">
          <el-button size="mini" type="info" @click="handleUpdate(scope.row)"
            >更新</el-button
          >
          <el-button size="mini" type="danger" @click="handeSc(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div
      class="pages"
      style="padding: 0; margin: 0; width: 100%; text-align: right"
    >
      <el-pagination
        class="role__page"
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <!-- 添加表单 -->
  <el-dialog
    title="添加"
    v-model="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="店铺名称" :required="true">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="快速公式">
        <el-checkbox
          v-model="ck1"
          @click="addGs(1)"
          label="老金发货"
        ></el-checkbox>
        <el-checkbox
          v-model="ck2"
          @click="addGs(2)"
          label="客户发货"
        ></el-checkbox>
        <el-checkbox
          v-model="ck3"
          @click="addGs(3)"
          label="100内9"
        ></el-checkbox>
        <el-checkbox
          v-model="ck4"
          @click="addGs(4)"
          label="100内8"
        ></el-checkbox>
        <el-checkbox
          v-model="ck5"
          @click="addGs(5)"
          label="100内10"
        ></el-checkbox>
        <el-checkbox
          v-model="ck6"
          @click="addGs(6)"
          label="100内11"
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="自定义" :required="true">
        <el-input v-model="form.formula" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item label="先打款名称(带.xlsx)" :required="true">
        <el-input v-model="form.path" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item prop="belong" label="对接客服" :required="true">
        <el-select clearable placeholder="请选择" v-model="form.belong">
          <el-option label="小强" :value="1"></el-option>
          <el-option label="小Y" :value="2"></el-option>
          <el-option label="小X" :value="3"></el-option>
          <el-option label="一宝" :value="4"></el-option>
          <el-option label="小Q" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="state" label="联系方式" :required="true">
        <el-select clearable placeholder="请选择" v-model="form.state">
          <el-option label="微信" :value="1"></el-option>
          <el-option label="QQ" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查找索引" :required="true">
        <el-input v-model="form.connect"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handeClos">取 消</el-button>
        <el-button type="primary" @click="handlleSubmitAdd">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 更新表单 -->
  <el-dialog
    title="更新"
    v-model="updataeDialog"
    width="60%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="店铺名称" :required="true">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="快速公式">
        <el-checkbox
          v-model="ck1"
          @click="addGs(1)"
          label="老金发货"
        ></el-checkbox>
        <el-checkbox
          v-model="ck2"
          @click="addGs(2)"
          label="客户发货"
        ></el-checkbox>
        <el-checkbox
          v-model="ck3"
          @click="addGs(3)"
          label="100内9"
        ></el-checkbox>
        <el-checkbox
          v-model="ck4"
          @click="addGs(4)"
          label="100内8"
        ></el-checkbox>
        <el-checkbox
          v-model="ck5"
          @click="addGs(5)"
          label="100内10"
        ></el-checkbox>
        <el-checkbox
          v-model="ck6"
          @click="addGs(6)"
          label="100内11"
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="自定义" :required="true">
        <el-input v-model="form.formula" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item label="先打款名称(带.xlsx)" :required="true">
        <el-input v-model="form.path" :clearable="true"></el-input>
      </el-form-item>
      <el-form-item prop="belong" label="对接客服" :required="true">
        <el-select clearable placeholder="请选择" v-model="form.belong">
          <el-option label="小强" :value="1"></el-option>
          <el-option label="小Y" :value="2"></el-option>
          <el-option label="小X" :value="3"></el-option>
          <el-option label="一宝" :value="4"></el-option>
          <el-option label="小Q" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="state" label="联系方式" :required="true">
        <el-select clearable placeholder="请选择" v-model="form.state">
          <el-option label="微信" :value="1"></el-option>
          <el-option label="QQ" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查找索引" :required="true">
        <el-input v-model="form.connect"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateClos">取 消</el-button>
        <el-button type="primary" @click="updateSubmit">更 新</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'Formula',
  data () {
    return {
      ck1: false,
      ck2: false,
      ck3: false,
      ck4: false,
      ck5: false,
      ck6: false,
      ck7: false,
      dialogVisible: false,
      updataeDialog: false,
      form: {},
      queryForm: {},
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableCloum: [
        {
          label: '店铺名称',
          prop: 'name',
          width: '180px'
        },
        {
          label: '公式',
          prop: 'formula',
        },
        {
          label: "先打款文件名",
          prop: 'path',
        }, {
          label: "联系类型",
          prop: "state",
          width: '80px',
          align: "center",
          formatter (row, cloum, value) {
            return {
              1: "微信",
              2: 'QQ',
            }[value]
          }
        },
        {
          label: "查询索引",
          prop: "connect",
          width: "180px"
        }, {
          label: "对接客服",
          prop: "belong",
          width: "100px",
          align: "center",
          formatter (row, cloum, value) {
            return {
              1: "小强",
              2: '小Y',
              3: "小X",
              4: '一宝',
              5: "小Q"
            }[value]
          }
        }
      ]
    }
  },
  methods: {
    /**
     * @type 表单重置
     */
    resetForm (form) {
      this.$refs[form].resetFields();
    },
    /** 取消 */
    handeClos () {
      this.dialogVisible = false
      this.resetForm('form')
    },
    /** 条件查找 */
    getDdeptQuery () {
      this.getDeptListFormlua()
    },
    /** 点击添加 */
    handleAdd () {
      this.dialogVisible = true
    },
    /** 更新取消 */
    updateClos () {
      this.updataeDialog = false
      this.resetForm('form')
    },
    /** 更新 */
    handleUpdate (row) {
      this.updataeDialog = true
      // 页面渲染完后执行方法
      this.$nextTick(() => {
        // 将row数据克隆给表单
        Object.assign(this.form, row)
      })
    },
    /** 删除 */
    async handeSc (row) {
      let params = { name: row.name }
      const res = await this.$api.deleteDeptDelete(params)
      this.getDeptListFormlua()
      this.$message.success(res)
    },
    /** 添加事件 */
    addGs (chek) {
      if (chek == 1) {
        this.form.formula = `IFS(F2<=50,15,F2<=100,16,F2<=200,17,F2<=400,18,F2<=600,21,F2<=800,25,TRUE,"ERROR")`
      } else if (chek == 2) {
        this.form.formula = `IFS(F2<=50,12,F2<=100,13,F2<=200,14,F2<=400,15,F2<=500,16,F2<=600,17,TRUE,"ERROR")`
      } else if (chek == 3) {
        this.form.formula = `IFS(F2<=100,9,F2<=200,10,F2<=300,11,F2<=400,12,F2<=500,13,F2<=600,14,TRUE,"ERROR")`
      } else if (chek == 4) {
        this.form.formula = `IFS(F2<=100,8,F2<=200,9,F2<=300,10,F2<=400,11,F2<=500,12,F2<=600,13,TRUE,"ERROR")`
      } else if (chek == 5) {
        this.form.formula = `IFS(F2<=100,10,F2<=200,11,F2<=300,12,F2<=400,13,F2<=500,14,F2<=600,15,F2<=700,16,F2<=800,17,F2<=1300,22,F2<=1700,26,TRUE,"ERROR")`
      } else if (chek == 6) {
        this.form.formula = `IFS(F2<=100,11,F2<=200,12,F2<=300,13,F2<=400,14,F2<=500,15,F2<=600,16,F2<=700,17,F2<=800,18,F2<=900,19,TRUE,"ERROR")`
      }
    },
    /** 提交表单 */
    async handlleSubmitAdd () {
      const res = await this.$api.handlleSubmitAdd(this.form)
      this.getDeptListFormlua()
      this.handeClos()
      this.$message.success(res)
    },
    /** 更新表单提交 */
    async updateSubmit () {
      const res = await this.$api.updateDeptData(this.form)
      this.getDeptListFormlua()
      this.updateClos()
      this.$message.success(res)
    },
    /** 初始化获取数据 */
    async getDeptListFormlua () {
      let params = { ...this.queryForm, ...this.page }
      const { list, page } = await this.$api.getDeptListFormlua(params)
      this.page.total = page.total
      this.tableData = list
    },
    // 分页
    handleCurrentChange (curren) {
      this.page.pageNum = curren
      this.getDeptListFormlua()
    },
  },
  mounted () {
    this.getDeptListFormlua()
  }
}
</script>

<style scoped>
.search {
  width: 100%;
  height: 50px;
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;
}
.tables {
  width: 100%;
  height: 90%;
  background: #fff;
}
</style>